<template>
  <div class="chuanb_detail">
    <div class="pageTitleWhole">
      <!-- <a @click="keepAliveBack">
        <a-icon type="left" />
        <span>返回</span>
      </a>-->
      <a-breadcrumb :routes="routes">
        <template slot="itemRender" slot-scope="{ route, routes, paths }">
          <span v-if="routes.indexOf(route) === routes.length - 1">{{ route.breadcrumbName }}</span>
          <router-link v-else :to="`${basePath}/${paths.join('/')}`">{{ route.breadcrumbName }}</router-link>
        </template>
      </a-breadcrumb>
    </div>
    <div class="voyageDE" v-if="isEdit0">
      <div class="voyageDETitle" :span="24">
        <h3>
          <img src="../../../static/images/voyage-icon.png" alt srcset />
          船名：{{shipInfo.name}}
          <a-button type="primary" @click="edit0">编 辑</a-button>
        </h3>
      </div>
      <a-row>
        <a-col :span="21">
          <a-col :span="7" style="margin-left:62px;">
            <div class="HCdetail">船舶识别号：{{shipInfo.identifier}}</div>
            <div class="HCdetail">经营类型：{{shipInfo.isSelfOperation === 1 ? '自营': '租赁'}}</div>
            <div class="HCdetail">录入人：{{shipInfo.creator || '--'}}</div>
          </a-col>
          <a-col :span="7">
            <div class="HCdetail">IMO编号：{{shipInfo.imo}}</div>
            <div class="HCdetail">TEU：{{shipInfo.loadingCapacity}}</div>
          </a-col>
          <a-col :span="7">
            <div class="HCdetail">船舶类型：{{shipInfo.shipType}}</div>
            <div class="HCdetail">建成日期：{{shipInfo.buildTime}}</div>
          </a-col>
        </a-col>
        <a-col :span="3">
          <h2 class="HCdetail_zt">{{shipInfo.status === 1 ? '正常' : '冻结'}}</h2>
        </a-col>
      </a-row>
    </div>
    <div class="voyageDE" v-else>
      <a-form-model ref="editForm0" :model="editForm0" :rules="rules" layout="inline">
        <div class="voyageDETitle voyageDETitle1" :span="24">
          <h3>
            <img src="../../../static/images/voyage-icon.png" alt srcset />
            <a-form-model-item label="船名" prop="name">
              <a-input v-model="editForm0.name" />
            </a-form-model-item>
            <a-form-model-item class="fried">
              <a-button type="primary" style=" margin-left:12px;" @click="save0">保 存</a-button>
              <a-button @click="cancel0">取消</a-button>
            </a-form-model-item>
          </h3>
        </div>
        <a-row>
          <a-col :span="19">
            <a-col :span="7" :offset="1">
              <div class="HCdetail HCdetail_1">
                <a-form-model-item label="船舶识别号" prop="identifier">
                  <a-input v-model="editForm0.identifier" style="width:150px" />
                </a-form-model-item>
              </div>
              <div class="HCdetail HCdetail_1">
                <a-form-model-item label="经营类型" prop="isSelfOperation">
                  <a-select
                    @change="isSelfOperationChange"
                    v-model="editForm0.isSelfOperation"
                    style="width:100px"
                  >
                    <a-select-option :key="1">自营</a-select-option>
                    <a-select-option :key="0">租赁</a-select-option>
                  </a-select>
                </a-form-model-item>
              </div>
              <div class="HCdetail HCdetail_1">
                <a-form-model-item label="录入人">
                  <a-input disabled :value="shipInfo.creator || '--'" style="width:150px" />
                </a-form-model-item>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="HCdetail HCdetail_1">
                <a-form-model-item label="IMO编号" prop="imo">
                  <a-input v-model="editForm0.imo" style="width:150px" />
                </a-form-model-item>
              </div>
              <div class="HCdetail HCdetail_1">
                <a-form-model-item label="TEU" prop="loadingCapacity">
                  <a-input v-model="editForm0.loadingCapacity" style="width:150px" />
                </a-form-model-item>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="HCdetail HCdetail_1">
                <a-form-model-item label="船舶类型" prop="shipType">
                  <a-input v-model="editForm0.shipType" style="width:130px" />
                </a-form-model-item>
              </div>
              <div class="HCdetail HCdetail_1">
                <a-form-model-item label="建成日期" prop="buildTime">
                  <a-date-picker
                    :default-value="momentDate(editForm0.buildTime, 'YYYY-MM-DD')"
                    @change="edit0Change"
                    style="width:130px;"
                  />
                </a-form-model-item>
              </div>
            </a-col>
          </a-col>
          <a-col :span="5">
            <a-form-model-item label="状态" prop="status" style="float:right; margin-right:24px;">
              <a-select v-model="editForm0.status" style="width:100px">
                <a-select-option :key="1">正常</a-select-option>
                <a-select-option :key="0">冻结</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <a-tabs
      :default-active-key="1"
      :animated="false"
      style="min-height:550px;padding-bottom:20px;"
      @change="tabChange"
      class="chuanb"
    >
      <a-tab-pane :key="1" tab="船舶信息">
        <a-card v-if="isEdit1" :bordered="false">
          <div class="card-title">
            船舶信息
            <a-button type="primary" style="float:right" @click="edit1">编辑</a-button>
          </div>
          <a-descriptions class="shipder1">
            <a-descriptions-item label="船籍港">{{shipInfo.portOfRegistry}}</a-descriptions-item>
            <a-descriptions-item label="下次年检日期">{{shipInfo.inspectionTime}}</a-descriptions-item>
            <a-descriptions-item label="下次保养日期">{{shipInfo.maintenanceTime}}</a-descriptions-item>
            <a-descriptions-item label="保险到期日期">{{shipInfo.insuranceExpireTime}}</a-descriptions-item>
            <a-descriptions-item label="船长（米）">{{shipInfo.length}}</a-descriptions-item>
            <a-descriptions-item label="船宽（米）">{{shipInfo.width}}</a-descriptions-item>
            <a-descriptions-item label="船高（米）">{{shipInfo.height}}</a-descriptions-item>
            <a-descriptions-item label="型深（米）">{{shipInfo.depth}}</a-descriptions-item>
            <a-descriptions-item label="总吨位">{{shipInfo.tonnage}}</a-descriptions-item>
            <a-descriptions-item label="净吨位">{{shipInfo.netTonnage}}</a-descriptions-item>
            <a-descriptions-item label="告警油量（吨）">{{shipInfo.alarmOilQuantity}}</a-descriptions-item>
            <a-descriptions-item></a-descriptions-item>
          </a-descriptions>
        </a-card>
        <a-card v-else :bordered="false">
          <div class="card-title">
            船舶信息
            <a-button type="primary" style="float:right" @click="save1">保 存</a-button>
            <a-button style="float:right;margin-right:12px" @click="cancel1">取 消</a-button>
          </div>
          <a-form-model
            ref="editForm1"
            :model="editForm1"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-row :gutter="[20]">
              <a-col :span="8">
                <a-form-model-item label="船籍港" prop="portOfRegistry">
                  <a-input v-model="editForm1.portOfRegistry" />
                </a-form-model-item>
                <a-form-model-item label="保险到期日期" prop="insuranceExpireTime">
                  <a-date-picker
                    :default-value="momentDate(editForm1.insuranceExpireTime, 'YYYY-MM-DD')"
                    @change="edit1Change1"
                    style="width:100%"
                  />
                </a-form-model-item>
                <a-form-model-item label="船高（米）" prop="height">
                  <a-input v-model="editForm1.height" />
                </a-form-model-item>
                <a-form-model-item label="净吨位" prop="netTonnage">
                  <a-input v-model="editForm1.netTonnage" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="下次年检日期" prop="inspectionTime">
                  <a-date-picker
                    :default-value="momentDate(editForm1.inspectionTime, 'YYYY-MM-DD')"
                    @change="edit1Change2"
                    style="width:100%"
                  />
                </a-form-model-item>
                <a-form-model-item label="船长（米）" prop="length">
                  <a-input v-model="editForm1.length" />
                </a-form-model-item>
                <a-form-model-item label="型深（米）" prop="depth">
                  <a-input v-model="editForm1.depth" />
                </a-form-model-item>
                <a-form-model-item label="告警油量（吨）" prop="alarmOilQuantity">
                  <a-input v-model="editForm1.alarmOilQuantity" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="下次保养日期" prop="maintenanceTime">
                  <a-date-picker
                    :default-value="momentDate(editForm1.maintenanceTime, 'YYYY-MM-DD')"
                    @change="edit1Change3"
                    style="width:100%"
                  />
                </a-form-model-item>
                <a-form-model-item label="船宽（米）" prop="width">
                  <a-input v-model="editForm1.width" />
                </a-form-model-item>
                <a-form-model-item label="总吨位" prop="tonnage">
                  <a-input v-model="editForm1.tonnage" />
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </a-card>
        <a-card v-if="isEdit2" :bordered="false">
          <div class="card-title">
            船APP账号
            <a-button type="primary" style="float:right" @click="edit2">编辑</a-button>
          </div>
          <a-descriptions class="shipder1">
            <a-descriptions-item label="船APP账号">{{shipInfo.shipInfoAccount.phone}}</a-descriptions-item>
            <a-descriptions-item label="船长姓名">{{shipInfo.shipInfoAccount.captainName}}</a-descriptions-item>
          </a-descriptions>
        </a-card>
        <a-card v-else :bordered="false">
          <div class="card-title">
            船APP账号
            <a-button type="primary" style="float:right" @click="save2">保 存</a-button>
            <a-button style="float:right;margin-right:12px" @click="cancel2">取 消</a-button>
          </div>
          <a-form-model
            ref="editForm2"
            :model="editForm2"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-row :gutter="[20]">
              <a-col :span="8">
                <a-form-model-item label="船APP账号">{{shipInfo.shipInfoAccount.phone}}</a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="船长姓名" prop="captainName">
                  <a-input v-model="editForm2.captainName" />
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </a-card>
        <a-card v-if="(shipInfo.isSelfOperation === 0 && isEdit3)" :bordered="false">
          <div class="card-title">
            船东信息
            <a-button type="primary" style="float:right" @click="edit3" disabled>编辑</a-button>
          </div>
          <a-descriptions class="shipder1 chandx">
            <a-descriptions-item label="船东名称">{{shipInfo.shipInfoOwner.name}}</a-descriptions-item>
            <a-descriptions-item label="联系人">{{shipInfo.shipInfoOwner.linkMan}}</a-descriptions-item>
            <a-descriptions-item label="联系电话">{{shipInfo.shipInfoOwner.linkManPhone}}</a-descriptions-item>
            <a-descriptions-item label="统一信用代码/身份证">{{shipInfo.shipInfoOwner.identityCard}}</a-descriptions-item>
            <a-descriptions-item label="地址">{{shipInfo.shipInfoOwner.address}}</a-descriptions-item>
            <a-descriptions-item label="银行卡户名">{{shipInfo.shipInfoOwner.bankcardAccountName}}</a-descriptions-item>
            <a-descriptions-item label="银行卡号">{{shipInfo.shipInfoOwner.bankcardAccountNumber}}</a-descriptions-item>
            <a-descriptions-item label="银行卡开户行">{{shipInfo.shipInfoOwner.openingBank}}</a-descriptions-item>
            <a-descriptions-item label></a-descriptions-item>
          </a-descriptions>
        </a-card>
        <a-card v-else-if="!shipInfoOwnerShow && editForm0.isSelfOperation===0" :bordered="false">
          <div class="card-title">
            船东信息
            <a-button type="primary" style="float:right" @click="edit3" disabled>编辑</a-button>
          </div>
          <a-descriptions>
            <a-descriptions-item label="船东名称">{{shipInfo.shipInfoOwner.name}}</a-descriptions-item>
            <a-descriptions-item label="联系人">{{shipInfo.shipInfoOwner.linkMan}}</a-descriptions-item>
            <a-descriptions-item label="联系电话">{{shipInfo.shipInfoOwner.linkManPhone}}</a-descriptions-item>
            <a-descriptions-item label="统一信用代码/身份证">{{shipInfo.shipInfoOwner.identityCard}}</a-descriptions-item>
            <a-descriptions-item label="地址">{{shipInfo.shipInfoOwner.address}}</a-descriptions-item>
            <a-descriptions-item label="银行卡户名">{{shipInfo.shipInfoOwner.bankcardAccountName}}</a-descriptions-item>
            <a-descriptions-item label="银行卡号">{{shipInfo.shipInfoOwner.bankcardAccountNumber}}</a-descriptions-item>
            <a-descriptions-item label="银行卡开户行">{{shipInfo.shipInfoOwner.openingBank}}</a-descriptions-item>
          </a-descriptions>
        </a-card>
        <a-card v-else-if="shipInfoOwnerShow" :bordered="false">
          <div class="card-title">
            船东信息
            <a-button type="primary" style="float:right" @click="save3">保 存</a-button>
          </div>
          <a-form-model ref="editForm3" :model="editForm3" :rules="rules" layout="inline">
            <a-form-model-item label="船东名称" prop="custId">
              <a-auto-complete @select="onSelect" @search="onSearch">
                <template slot="dataSource">
                  <a-select-option
                    v-for="(record,index) in shipOwner"
                    :key="index"
                    :value="record.name"
                  >{{ record.name }}</a-select-option>
                </template>
              </a-auto-complete>
            </a-form-model-item>
          </a-form-model>
          <a-descriptions>
            <a-descriptions-item label="船东名称">{{selectObj.name}}</a-descriptions-item>
            <a-descriptions-item label="联系人">{{selectObj.linkMan}}</a-descriptions-item>
            <a-descriptions-item label="联系电话">{{selectObj.linkManPhone}}</a-descriptions-item>
            <a-descriptions-item label="统一信用代码/身份证">{{selectObj.identityCard}}</a-descriptions-item>
            <a-descriptions-item label="地址">{{selectObj.address}}</a-descriptions-item>
            <a-descriptions-item label="银行卡户名">{{selectObj.bankcardAccountName}}</a-descriptions-item>
            <a-descriptions-item label="银行卡号">{{selectObj.bankcardAccountNumber}}</a-descriptions-item>
            <a-descriptions-item label="银行卡开户行">{{selectObj.openingBank}}</a-descriptions-item>
          </a-descriptions>
        </a-card>
        <a-card :bordered="false" class="busenPic">
          <template v-if="isEdit4">
            <div class="card-title">
              船舶合同
              <a-button type="primary" style="float:right" @click="edit4">编辑</a-button>
            </div>
            <a-row>
              <a-col :span="22" :offset="1">
                <a-list>
                  <a-list-item
                    v-for="(ag, index) in this.shipInfo.shipInfoContractList"
                    :key="index"
                  >
                    <a-icon type="link" :style="{color: getColor(ag.beginTime, ag.endTime)}" />
                    合同有效期：{{ag.beginTime}} ~ {{ag.endTime}}
                    <a
                      @click="checkAgreementDetail(index)"
                    >查看</a>
                  </a-list-item>
                </a-list>
              </a-col>
            </a-row>
          </template>
          <template v-if="!isEdit4">
            <a-button type="primary" class="cardEdit" @click="uploadAgreement">
              <a-icon type="upload" />上传合同
            </a-button>
            <div class="card-title">
              船舶合同
              <a-button type="primary" style="float:right" @click="save4">保 存</a-button>
              <a-button style="float:right;margin-right:12px" @click="cancel4">取 消</a-button>
            </div>
            <a-form-model
              ref="editForm4"
              :model="editForm4"
              :rules="rules"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-form-model-item prop="contractPics" :wrapperCol="{span:24}">
                <a-row>
                  <a-col :span="22" :offset="1">
                    <a-list>
                      <a-list-item
                        v-for="(ag, index) in this.editForm4.shipInfoContractList"
                        :key="index"
                      >
                        <a-icon type="link" :style="{color: getColor(ag.beginTime, ag.endTime)}" />
                        合同有效期：{{ag.beginTime}} ~ {{ag.endTime}}
                        <a @click="checkAgreement(index)">查看</a>
                      </a-list-item>
                    </a-list>
                  </a-col>
                </a-row>
              </a-form-model-item>
            </a-form-model>
          </template>
        </a-card>
        <a-card v-if="isEdit5" :bordered="false">
          <div class="card-title">
            船舶营运证
            <a-button type="primary" style="float:right" @click="edit5">编辑</a-button>
          </div>
          <viewer :images="shipInfo.operationCertificatePics.split(',')" :options="{url: 'data-x'}">
            <template v-for="(src,index) in shipInfo.operationCertificatePics.split(',')">
              <img
                style="width:100px;height:100px;margin-right:10px; margin-bottom:10px; border:1px solid #eee;"
                :src="`${src}?x-oss-process=image/resize,h_100`"
                :data-x="src"
                :key="index"
                v-if="src"
              />
            </template>
          </viewer>
        </a-card>
        <a-card v-else :bordered="false" class="busenPic">
          <div class="card-title">
            船舶营运证
            <a-button type="primary" style="float:right" @click="save5">保 存</a-button>
            <a-button style="float:right;margin-right:12px" @click="cancel5">取 消</a-button>
          </div>
          <a-form-model
            ref="editForm5"
            :model="editForm5"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-model-item prop="operationCertificatePics" :wrapperCol="{span:24}">
              <upload
                :uploadName="'operationCertificatePics'"
                :fatherList="shipInfo.operationCertificatePics.split(',')"
                :length="10"
                @uploadFile="operationCertificatePics"
              ></upload>
            </a-form-model-item>
          </a-form-model>
        </a-card>
        <a-card v-if="isEdit6" :bordered="false">
          <div class="card-title">
            保险保单
            <a-button type="primary" style="float:right" @click="edit6">编辑</a-button>
          </div>
          <viewer :images="shipInfo.insurancePolicyPics.split(',')" :options="{url: 'data-x'}">
            <template v-for="(src,index) in shipInfo.insurancePolicyPics.split(',')">
              <img
                style="width:100px;height:100px;margin-right:10px; margin-bottom:10px; border:1px solid #eee"
                :src="`${src}?x-oss-process=image/resize,h_100`"
                :data-x="src"
                :key="index"
                v-if="src"
              />
            </template>
          </viewer>
        </a-card>
        <a-card v-else :bordered="false" class="busenPic">
          <div class="card-title">
            保险保单
            <a-button type="primary" style="float:right" @click="save6">保 存</a-button>
            <a-button style="float:right;margin-right:12px" @click="cancel6">取 消</a-button>
          </div>
          <a-form-model
            ref="editForm6"
            :model="editForm6"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-model-item prop="insurancePolicyPics" :wrapperCol="{span:24}">
              <upload
                :uploadName="'insurancePolicyPics'"
                :fatherList="shipInfo.insurancePolicyPics.split(',')"
                :length="10"
                @uploadFile="insurancePolicyPics"
              ></upload>
            </a-form-model-item>
          </a-form-model>
        </a-card>
        <a-card v-if="isEdit7" :bordered="false">
          <div class="card-title">
            船检证书
            <a-button type="primary" style="float:right" @click="edit7">编辑</a-button>
          </div>
          <viewer
            :images="shipInfo.inspectionCertificatePics.split(',')"
            :options="{url: 'data-x'}"
          >
            <template v-for="(src,index) in shipInfo.inspectionCertificatePics.split(',')">
              <img
                style="width:100px;height:100px;margin-right:10px; margin-bottom:10px; border:1px solid #eee"
                :src="`${src}?x-oss-process=image/resize,h_100`"
                :data-x="src"
                :key="index"
                v-if="src"
              />
            </template>
          </viewer>
        </a-card>
        <a-card v-else :bordered="false" class="busenPic">
          <div class="card-title">
            船检证书
            <a-button type="primary" style="float:right" @click="save7">保 存</a-button>
            <a-button style="float:right;margin-right:12px" @click="cancel7">取 消</a-button>
          </div>
          <a-form-model
            ref="editForm7"
            :model="editForm7"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-model-item prop="inspectionCertificatePics" :wrapperCol="{span:24}">
              <upload
                :uploadName="'inspectionCertificatePics'"
                :fatherList="shipInfo.inspectionCertificatePics.split(',')"
                :length="10"
                @uploadFile="inspectionCertificatePics"
              ></upload>
            </a-form-model-item>
          </a-form-model>
        </a-card>
        <a-card v-if="isEdit8" :bordered="false">
          <div class="card-title">
            配员证书
            <a-button type="primary" style="float:right" @click="edit8">编辑</a-button>
          </div>
          <viewer :images="shipInfo.staffingCertificatePics.split(',')">
            <template v-for="(src,index) in shipInfo.staffingCertificatePics.split(',')">
              <img
                style="width:100px;height:100px;margin-right:10px; margin-bottom:10px; border:1px solid #eee"
                :src="`${src}?x-oss-process=image/resize,h_100`"
                :data-x="src"
                :key="index"
                v-if="src"
              />
            </template>
          </viewer>
        </a-card>
        <a-card v-else :bordered="false" class="busenPic">
          <div class="card-title">
            配员证书
            <a-button type="primary" style="float:right" @click="save8">保 存</a-button>
            <a-button style="float:right;margin-right:12px" @click="cancel8">取 消</a-button>
          </div>
          <a-form-model
            ref="editForm8"
            :model="editForm8"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-model-item prop="staffingCertificatePics" :wrapperCol="{span:24}">
              <upload
                :uploadName="'staffingCertificatePics'"
                :fatherList="shipInfo.staffingCertificatePics.split(',')"
                :length="10"
                @uploadFile="staffingCertificatePics"
              ></upload>
            </a-form-model-item>
          </a-form-model>
        </a-card>
        <a-card v-if="isEdit9" :bordered="false">
          <div class="card-title">
            国籍证书
            <a-button type="primary" style="float:right" @click="edit9">编辑</a-button>
          </div>
          <viewer
            :images="shipInfo.nationalityCertificatePics.split(',')"
            :options="{url: 'data-x'}"
          >
            <template v-for="(src,index) in shipInfo.nationalityCertificatePics.split(',')">
              <img
                style="width:100px;height:100px;margin-right:10px; margin-bottom:10px; border:1px solid #eee"
                :src="`${src}?x-oss-process=image/resize,h_100`"
                :data-x="src"
                :key="index"
                v-if="src"
              />
            </template>
          </viewer>
        </a-card>
        <a-card v-else :bordered="false" class="busenPic">
          <div class="card-title">
            国籍证书
            <a-button type="primary" style="float:right" @click="save9">保 存</a-button>
            <a-button style="float:right;margin-right:12px" @click="cancel9">取 消</a-button>
          </div>
          <a-form-model
            ref="editForm9"
            :model="editForm9"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-model-item prop="nationalityCertificatePics" :wrapperCol="{span:24}">
              <upload
                :uploadName="'nationalityCertificatePics'"
                :fatherList="shipInfo.nationalityCertificatePics.split(',')"
                :length="10"
                @uploadFile="nationalityCertificatePics"
              ></upload>
            </a-form-model-item>
          </a-form-model>
        </a-card>
        <a-card v-if="isEdit10" :bordered="false">
          <div class="card-title">
            所有权证书
            <a-button type="primary" style="float:right" @click="edit10">编辑</a-button>
          </div>
          <viewer :images="shipInfo.ownershipCertificatePics.split(',')" :options="{url: 'data-x'}">
            <template v-for="(src,index) in shipInfo.ownershipCertificatePics.split(',')">
              <img
                style="width:100px;height:100px;margin-right:10px; margin-bottom:10px; border:1px solid #eee"
                :src="`${src}?x-oss-process=image/resize,h_100`"
                :data-x="src"
                :key="index"
                v-if="src"
              />
            </template>
          </viewer>
        </a-card>
        <a-card v-else :bordered="false" class="busenPic">
          <div class="card-title">
            所有权证书
            <a-button type="primary" style="float:right" @click="save10">保 存</a-button>
            <a-button style="float:right;margin-right:12px" @click="cancel10">取 消</a-button>
          </div>
          <a-form-model
            ref="editForm10"
            :model="editForm10"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-model-item prop="ownershipCertificatePics" :wrapperCol="{span:24}">
              <upload
                :uploadName="'ownershipCertificatePics'"
                :fatherList="shipInfo.ownershipCertificatePics.split(',')"
                :length="10"
                @uploadFile="ownershipCertificatePics"
              ></upload>
            </a-form-model-item>
          </a-form-model>
        </a-card>
      </a-tab-pane>
      <a-tab-pane :key="2" tab="执行航次">
        <a-card :bordered="false">
          <div class="card-title">执行航次</div>
          <div class="takeoutMain">
            <a-form-model layout="inline" :model="form" ref="form" :style="'margin-top:0px;'">
              <a-form-model-item label="航次">
                <a-input v-model="form.voyageNumberLike" />
              </a-form-model-item>
              <a-form-model-item label="起航日期">
                <a-range-picker @change="dateChange" :value="createValue2" style="width: 250px" />
              </a-form-model-item>
              <a-form-model-item>
                <a-button type="primary" @click="voyageCheck">查询</a-button>
              </a-form-model-item>
              <a-form-model-item>
                <a-button type="primary" @click="exportExcel">导出Excel</a-button>
              </a-form-model-item>
            </a-form-model>
            <a-table
              :columns="columns"
              :loading="loading"
              :data-source="data"
              :style="'margin-top: 25px;'"
              :pagination="pagination"
              :row-key="(record,index) => index"
            >
              <span
                slot="status"
                slot-scope="text, record"
                :style="'display: flex; align-items: center;'"
              >
                <template v-if="record.status==1">
                  <span class="yellow"></span>
                  <span>待执行</span>
                </template>
                <template v-else-if="record.status==2">
                  <span class="green"></span>
                  <span>执行中</span>
                </template>
                <template v-else>
                  <span class="grey"></span>
                  <span>结束</span>
                </template>
              </span>
              <template slot="do" slot-scope="record">
                <a @click="detail(record)">日志</a>
              </template>
            </a-table>
          </div>
        </a-card>
      </a-tab-pane>
      <!-- <a-tab-pane v-if="shipInfo.isSelfOperation === 1" :key="3" tab="燃油管理"> -->
      <a-tab-pane :key="3" tab="燃油管理">
        <a-card :bordered="false">
          <div class="card-title">燃油管理</div>
          <a-row :gutter="[48]">
            <a-col :span="8">
              <div id="liquidFill" style="width:100%;height:150px;"></div>
            </a-col>
            <a-col :span="8">
              <div class="ant-card-body1">
                <div class="caiG1">
                  <p class="caiGou">加油量（吨）</p>
                  <h1 class="cgYoul">{{oildDetail.stockInOilTotal}}</h1>
                </div>
                <p class="cgSale">
                  加油总金额（元）
                  <span>{{oildDetail.stockInTotalAmount}}</span>
                </p>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="ant-card-body1">
                <div class="caiG2">
                  <p class="caiGou">耗油量（吨）</p>
                  <h1 class="cgYoul">{{oildDetail.stockOutOilTotal}}</h1>
                </div>
                <p class="cgSale">
                  耗油总金额（元）
                  <span>{{oildDetail.stockOutTotalAmount}}</span>
                </p>
              </div>
            </a-col>
          </a-row>
          <div class="takeoutMain" style="margin-top:50px">
            <a-form-model layout="inline" ref="form2" :model="form2" :style="'margin-top:0px;'">
              <a-form-model-item label="记录类型">
                <a-select v-model="form2.oilBusinessType" style="width:120px">
                  <a-select-option value>全部</a-select-option>
                  <a-select-option value="OIL">加油</a-select-option>
                  <a-select-option value="FUEL">航线耗油</a-select-option>
                  <a-select-option value="UPKEEP">保养耗油</a-select-option>
                  <a-select-option value="REPAIR">维修耗油</a-select-option>
                  <a-select-option value="ANNUAL">年检耗油</a-select-option>
                  <a-select-option value="OTHER">其他耗油</a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="日期">
                <a-range-picker @change="dateChange2" :value="createValue" style="width: 250px" />
              </a-form-model-item>
              <a-form-model-item>
                <a-button type="primary" @click="oilCheck">查询</a-button>
              </a-form-model-item>
              <a-form-model-item>
                <a-button type="primary" @click="oilExport">导出Excel</a-button>
              </a-form-model-item>
            </a-form-model>
            <a-table
              :columns="columns2"
              :loading="loading"
              :data-source="data2"
              :style="'margin-top: 25px;'"
              :pagination="pagination"
              :row-key="(record,index) => index"
            >
              <template slot="oilBusinessType" slot-scope="text, record">
                <span v-if="record.businessType==='REPAIR'">维修耗油</span>
                <span v-else-if="record.businessType==='ANNUAL'">年检耗油</span>
                <span v-else-if="record.businessType==='UPKEEP'">保养耗油</span>
                <span v-else-if="record.businessType==='OTHER'">其它耗油</span>
                <span v-else-if="record.businessType==='OIL'">加油</span>
                <span v-else-if="record.businessType==='FUEL'">航线耗油</span>
              </template>
              <template slot="do" slot-scope="record">
                <a @click="detail(record)">日志</a>
              </template>
            </a-table>
          </div>
        </a-card>
      </a-tab-pane>
    </a-tabs>
    <!-- 日志 -->
    <a-modal v-model="routeDetail" title="日志" width="1200px" centered :footer="null">
      <a-row>
        <a-col :span="9">
          <div class="hangci_rzhi">
            <a-card title="航次日志">
              <div class="dp_ddgz" style="height:474px; overflow-y:scroll; margin:24px 0;">
                <dl>
                  <template v-for="(item,index) in shipVoyageLogList">
                    <dt :key="index">
                      {{item.createTime.split(" ")[0]}}
                      <br />
                      {{item.createTime.split(" ")[1]}}
                    </dt>
                    <dd
                      :key="'info-'+index"
                      :class="index===0 ? 'dp_ddgz_t': index+1===shipVoyageLogList.length ? 'dp_ddgz_b' : ''"
                    >
                      <h1>{{item.title}}</h1>
                      <p>备注：{{item.content}}</p>
                    </dd>
                  </template>
                </dl>
              </div>
            </a-card>
          </div>
        </a-col>
        <a-col :span="15">
          <a-card title="日志统计" style="height:580px">
            <a-row :gutter="[20]">
              <a-col :span="12">
                <div class="JournalRZ JournalRZ1">
                  <a-card
                    title="累计上报次数"
                    :head-style="{fontSize:'14px', borderBottom:'none'}"
                    :body-style="{fontSize:'26px',color:'#000',padding:'10px 24px'}"
                  >{{totalLogNum}}</a-card>
                </div>
              </a-col>
              <a-col :span="12">
                <div class="JournalRZ JournalRZ2">
                  <a-card
                    title="航期（天）"
                    :head-style="{fontSize:'14px', borderBottom:'none'}"
                    :body-style="{fontSize:'26px',color:'#000',padding:'10px 24px'}"
                  >{{shipVoyageLogStatisticsList.length}}</a-card>
                </div>
              </a-col>
            </a-row>
            <div style="margin-top:20px;color:#000;font-size:18px">日志上报次数统计</div>
            <div
              id="echartss"
              :style="shipVoyageLogStatisticsList.length > 15 ? {width:'100%',height:'300px',overflowX:'scroll'} : {width:'100%',height:'300px'}"
            ></div>
          </a-card>
        </a-col>
      </a-row>
    </a-modal>

    <agreement-modal
      :visible="agreementVisible"
      @set-agreement-visible="setAgreementVisible"
      @handle-agreement="handleAgreement"
    />
    <agreement-view-modal
      :visible="agreementViewVisible"
      :agreement="custInfoContract"
      @set-agview-visible="setAgreementViewVisible"
    />
  </div>
</template>
<script>
import agreementModal from '@/page/landCenter/agreementUploadModal'
import agreementViewModal from '@/page/landCenter/agreementViewModal'
import _ from 'lodash/debounce'
import upload from '@/components/UpLoad'
import {
  getShipInfoById,
  queryShipVoyageList,
  getShipVoyageLogById,
  queryShipOilOutList,
  getShipOilStatistics,
  editShipInfo,
  getShipOwnerByNameLike
} from '@/api/shipCenter'
import { commonExport } from '@/api/request'
import moment from 'moment'
import echarts from 'echarts'
// eslint-disable-next-line no-unused-vars
import echartsLiquidfill from 'echarts-liquidfill' // echarts水滴球
import 'viewerjs/dist/viewer.css'

const fomrMessage = `必填项不能为空`
const columns = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '船名',
    dataIndex: 'shipName'
  },
  {
    title: '航次',
    dataIndex: 'voyageNumber'
  },
  {
    title: '航线',
    dataIndex: 'routeName'
  },
  {
    title: '起航日期',
    dataIndex: 'departureDate'
  },
  {
    title: '到达日期',
    dataIndex: 'arriveDate',
    customRender: (text, record, index) => {
      return record.arriveDate || '--'
    }
  },
  {
    title: '航期（天）',
    dataIndex: 'sailingDays',
    customRender: (text, record, index) => {
      return record.sailingDays || '--'
    }
  },
  {
    title: '状态',
    key: 'stauts',
    _needName: true,
    dataIndex: 'status',
    scopedSlots: {
      customRender: 'status'
    }
  },
  {
    title: '操作',
    width: 120,
    key: 'do',
    scopedSlots: {
      customRender: 'do'
    }
  }
]
const columns2 = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '类型',
    dataIndex: 'businessType',
    _needName: true,
    scopedSlots: {
      customRender: 'oilBusinessType'
    }
  },
  {
    title: '油量（吨）',
    dataIndex: 'oilVolume'
  },
  {
    title: '总价（元）',
    dataIndex: 'totalAmount'
  },
  {
    title: '航次',
    dataIndex: 'voyageNumber',
    customRender: (text, record, index) => {
      return record.voyageNumber || '--'
    }
  },
  {
    title: '日期',
    dataIndex: 'createTime'
  },
  {
    title: '备注',
    dataIndex: 'remark'
  }
]
export default {
  props: ['id'],
  components: {
    upload,
    [agreementModal.name]: agreementModal,
    [agreementViewModal.name]: agreementViewModal
  },
  data () {
    // lodash-debounce
    this.onSearch = _(this.onSearch, 800)

    let validateContractPics = (rule, value, callback) => {
      if (this.editForm4.shipInfoContractList.length === 0) {
        callback(new Error(fomrMessage))
      } else {
        callback()
      }
    }

    return {
      createValue: [],
      createValue2: [],
      basePath: '/shipCenter',
      routes: [
        {
          path: '/shipManagement',
          breadcrumbName: '船舶管理'
        },
        {
          path: '',
          breadcrumbName: '船舶详情'
        }
      ],
      shipInfo: {
        shipInfoContractList: [],
        operationCertificatePics: '',
        insurancePolicyPics: '',
        inspectionCertificatePics: '',
        staffingCertificatePics: '',
        nationalityCertificatePics: '',
        ownershipCertificatePics: '',
        shipInfoAccount: {
          id: undefined,
          shipId: undefined,
          phone: '',
          password: '',
          captainName: ''
        },
        shipInfoOwner: {
          address: '',
          bankcardAccountName: '',
          bankcardAccountNumber: '',
          id: undefined,
          identityCard: '',
          linkMan: '',
          linkManPhone: '',
          name: '',
          openingBank: ''
        }
      },
      shipId: '',
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      form: {
        dateSearchType: 1,
        voyageNumberLike: '', // 航次
        startDate: '', // 开始时间
        endDate: '' // 结束时间
      },
      pageNum: 1,
      pageSize: 10,
      loading: true,
      data: [],
      columns,
      pagination: {},
      routeDetail: false,
      shipVoyageLogList: [],
      shipVoyageLogStatisticsList: [],
      totalLogNum: 0,
      form2: {
        startDate: '', // 开始时间
        endDate: '', // 结束时间
        oilType: 1,
        shipId: this.id,
        oilBusinessType: ''
      },
      columns2,
      data2: [],
      oildDetail: {},
      isEdit0: true,
      editForm0: {
        name: '',
        identifier: '',
        isSelfOperation: undefined,
        imo: '',
        loadingCapacity: '',
        shipType: '',
        buildTime: '',
        status: undefined
      },
      isEdit1: true,
      editForm1: {
        portOfRegistry: '',
        inspectionTime: '',
        maintenanceTime: '',
        insuranceExpireTime: '',
        length: '',
        width: '',
        height: '',
        depth: '',
        tonnage: '',
        netTonnage: '',
        alarmOilQuantity: ''
      },
      isEdit2: true,
      editForm2: {
        captainName: '',
        id: ''
      },
      isEdit3: true,
      editForm3: {
        custId: ''
      },
      isEdit4: true,
      editForm4: {
        shipInfoContractList: []
      },
      isEdit5: true,
      editForm5: {
        operationCertificatePics: ''
      },
      isEdit6: true,
      editForm6: {
        insurancePolicyPics: ''
      },
      isEdit7: true,
      editForm7: {
        inspectionCertificatePics: ''
      },
      isEdit8: true,
      editForm8: {
        staffingCertificatePics: ''
      },
      isEdit9: true,
      editForm9: {
        nationalityCertificatePics: ''
      },
      isEdit10: true,
      editForm10: {
        ownershipCertificatePics: ''
      },
      shipInfoOwnerShow: false,
      shipOwner: [],
      selectObj: {},
      rules: {
        name: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        identifier: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        isSelfOperation: [
          { required: true, message: fomrMessage, trigger: 'change' }
        ],
        imo: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        loadingCapacity: [
          { required: true, message: fomrMessage, trigger: 'blur' }
        ],
        shipType: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        buildTime: [
          { required: true, message: fomrMessage, trigger: 'change' }
        ],
        status: [{ required: true, message: fomrMessage, trigger: 'change' }],
        // 1
        portOfRegistry: [
          { required: true, message: fomrMessage, trigger: 'blur' }
        ],
        inspectionTime: [
          { required: true, message: fomrMessage, trigger: 'change' }
        ],
        maintenanceTime: [
          { required: true, message: fomrMessage, trigger: 'change' }
        ],
        insuranceExpireTime: [
          { required: true, message: fomrMessage, trigger: 'change' }
        ],
        length: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        width: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        height: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        depth: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        tonnage: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        netTonnage: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        alarmOilQuantity: [
          { required: true, message: fomrMessage, trigger: 'blur' }
        ],
        // 2
        captainName: [
          { required: true, message: fomrMessage, trigger: 'blur' }
        ],
        // 4
        contractPics: [
          { required: true, validator: validateContractPics, trigger: 'change' }
        ],
        // 5
        operationCertificatePics: [
          { required: true, message: fomrMessage, trigger: 'change' }
        ],
        // 6
        insurancePolicyPics: [
          { required: true, message: fomrMessage, trigger: 'change' }
        ],
        // 7
        inspectionCertificatePics: [
          { required: true, message: fomrMessage, trigger: 'change' }
        ],
        // 8
        staffingCertificatePics: [
          { required: true, message: fomrMessage, trigger: 'change' }
        ],
        // 9
        nationalityCertificatePics: [
          { required: true, message: fomrMessage, trigger: 'change' }
        ],
        // 10
        ownershipCertificatePics: [
          { required: true, message: fomrMessage, trigger: 'change' }
        ],
        // 3
        custId: [{ required: true, message: fomrMessage, trigger: 'blur' }]
      },
      btnControl: {},
      // 合同
      custInfoContract: {
        name: '', // 合同名称
        beginTime: '', // 合同有效期
        endTime: '', // 合同有效期
        pictures: '' // 上传合同
      },
      agreementVisible: false,
      agreementViewVisible: false
    }
  },
  methods: {
    keepAliveBack () {
      this.$router.push('/shipCenter/shipManagement')
    },
    getColor (beginTime, endTime) {
      const isOver = new Date(`${endTime} 23:59:59`).getTime() < new Date().getTime() || new Date(`${beginTime}`).getTime() > new Date().getTime()
      return isOver ? 'grey' : '#1890ff'
    },
    uploadAgreement () {
      this.agreementVisible = true
    },
    setAgreementVisible (visible) {
      this.agreementVisible = visible
    },
    handleAgreement (agreement) {
      this.editForm4.shipInfoContractList.push({...agreement})
      this.agreementVisible = false
    },
    checkAgreementDetail (index) {
      this.agreementViewVisible = true
      this.custInfoContract = Object.assign({}, this.shipInfo.shipInfoContractList[index])
    },
    checkAgreement (index) {
      this.agreementViewVisible = true
      this.custInfoContract = Object.assign({}, this.editForm4.shipInfoContractList[index])
    },
    setAgreementViewVisible (visible) {
      this.agreementViewVisible = visible
    },
    momentDate (date, format) {
      return moment(date)
    },
    getShipInfo (param) {
      getShipInfoById(param)
        .then(res => {
          // // console.log(res.data)
          this.shipInfo = res.data
        })
        .catch(rs => {})
    },
    // 航次查询
    queryVoyage (paramData) {
      queryShipVoyageList(paramData)
        .then(res => {
          // // console.log(res)
          this.data = res.data.list
          let currentPage = this.pageNum
          this.pagination = {
            current: currentPage,
            pageSize: res.data.pageSize,
            total: res.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              let paramData = {
                shipId: this.shipId,
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                dateSearchType: 1,
                voyageNumberLike: this.form.voyageNumberLike, // 航次
                startDate: this.form.startDate, // 开始时间
                endDate: this.form.endDate // 结束时间
              }
              this.queryVoyage(paramData)
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              let paramData = {
                shipId: this.shipId,
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                dateSearchType: 1,
                voyageNumberLike: this.form.voyageNumberLike, // 航次
                startDate: this.form.startDate, // 开始时间
                endDate: this.form.endDate // 结束时间
              }
              this.queryVoyage(paramData)
            }
          }
          this.loading = false
        })
        .catch(rs => {})
    },
    // 表单查询
    voyageCheck () {
      this.pageNum = 1
      let paramData = {
        shipId: this.shipId,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        dateSearchType: 1,
        voyageNumberLike: this.form.voyageNumberLike, // 航次
        startDate: this.form.startDate, // 开始时间
        endDate: this.form.endDate // 结束时间
      }
      this.loading = true
      this.queryVoyage(paramData)
    },
    // 详情
    detail (e) {
      // console.log(e)
      this.routeDetail = true
      setTimeout(() => {
        this.voyageStatus({ id: e.id })
      }, 1)
    },
    // 导出
    exportExcel () {
      let paramData = {
        columns: this.columns,
        shipId: this.shipId,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        dateSearchType: 1,
        voyageNumberLike: this.form.voyageNumberLike, // 航次
        startDate: this.form.startDate, // 开始时间
        endDate: this.form.endDate // 结束时间
      }
      commonExport('/ship/exportShipVoyageList', paramData)
    },
    // 日期控件
    dateChange (date, dateString) {
      this.createValue2 = date
      this.form.startDate = dateString[0]
      this.form.endDate = dateString[1]
    },
    voyageStatus (param) {
      let _this = this
      // 船舶状态-柱状图
      let myChart = echarts.init(document.getElementById('echartss'))
      getShipVoyageLogById(param)
        .then(res => {
          // console.log(res.data)
          let totalLogNum = 0
          let LogList = res.data.shipVoyageLogList
          let logStatisticsList = res.data.shipVoyageLogStatisticsList
          let xAxisArray = []
          let seriesArray = []
          for (let i = 0; i < logStatisticsList.length; i++) {
            totalLogNum += logStatisticsList[i].logNum
            xAxisArray.push(logStatisticsList[i].logDate)
            seriesArray.push(logStatisticsList[i].logNum)
          }
          _this.shipVoyageLogList = LogList
          _this.shipVoyageLogStatisticsList = logStatisticsList
          _this.totalLogNum = totalLogNum
          myChart.setOption({
            color: ['#3398DB'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: xAxisArray,
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '上报次数',
                type: 'bar',
                barWidth: '20%',
                data: seriesArray
              }
            ]
          })
        })
        .catch(rs => {})
    },
    oilManage (param) {
      this.loading = true
      queryShipOilOutList(param)
        .then(res => {
          // console.log(res.data)
          this.data2 = res.data.list
          let currentPage = this.pageNum
          this.pagination = {
            current: currentPage,
            pageSize: res.data.pageSize,
            total: res.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              let param = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form2
              }
              this.oilManage(param)
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              let param = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form2
              }
              this.oilManage(param)
            }
          }
          this.loading = false
        })
        .catch(rs => {})
    },
    dateChange2 (date, dateString) {
      this.createValue = date
      this.form2.startDate = dateString[0]
      this.form2.endDate = dateString[1]
    },
    oilCheck () {
      this.pageNum = 1
      this.pageSize = 10
      this.oilManage({
        ...this.form2,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
      this.getShipOil({
        businessType: this.form2.oilBusinessType,
        oilType: 1,
        shipId: this.id
      })
    },
    oilExport () {
      commonExport('/ship/exportShipOilOutList', {
        ...this.form2,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        columns: this.columns2
      })
    },
    liquidFill (res) {
      let liquid = this.$echarts.init(document.getElementById('liquidFill'))
      let result
      if (res >= 30) {
        result = 0.5
      } else {
        result = 0.2
      }
      liquid.setOption({
        series: [
          {
            type: 'liquidFill',
            data: [result],
            radius: '95%',
            backgroundStyle: {
              color: '#fff',
              shadowColor: '#fff',
              shadowBlur: 0
            },
            itemStyle: {
              normal: {
                shadowBlur: 0
              }
            },
            outline: {
              show: true, // 是否显示轮廓 布尔值
              borderDistance: 5, // 外部轮廓与图表的距离 数字
              itemStyle: {
                borderColor: result === 0.5 ? '#1890FF' : '#f5222d', // 边框的颜色
                borderWidth: 2 // 边框的宽度
                // shadowBlur: 5 , // 外部轮廓的阴影范围 一旦设置了内外都有阴影
                // shadowColor: '#000' // 外部轮廓的阴影颜色
              }
            },
            color: result === 0.5 ? ['#1890FF'] : ['#f5222d'],
            label: {
              position: ['50%', '50%'],
              formatter: function (param) {
                return `当前油量（吨）\n${res}`
              },
              fontSize: 14,
              color: '#666'
            }
          }
        ]
      })
    },
    getShipOil (e) {
      getShipOilStatistics(e)
        .then(res => {
          // console.log(res)
          this.oildDetail = res.data
          this.liquidFill(res.data.currentOilTotal)
          // this.liquidFill(res.data.remainingOilTotal)
        })
        .catch(rs => {})
    },
    tabChange (activeKey) {
      this.pageNum = 1
      this.pageSize = 10
      this.isEdit0 = true
      if (activeKey === 1) {
      } else if (activeKey === 2) {
        this.createValue2 = []
        this.form.shipId = ''
        this.form.voyageNumberLike = ''
        this.form.startDate = ''
        this.form.endDate = ''
        this.queryVoyage({
          dateSearchType: 1,
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          shipId: this.id
        })
        // this.$nextTick(() => {
        //   this.$refs['form'].resetFields()
        // })
      } else if (activeKey === 3) {
        this.form2.startDate = '' // 开始时间
        this.form2.endDate = '' // 结束时间
        this.form2.oilType = 1
        this.form2.shipId = this.id
        this.form2.oilBusinessType = ''
        this.createValue = []
        this.oilManage({
          oilType: 1,
          shipId: this.id,
          pageSize: this.pageSize,
          pageNum: this.pageNum
        })
        this.getShipOil({
          oilType: 1,
          shipId: this.id
        })
      }
    },
    shipInfoEdit (e, status) {
      editShipInfo(e)
        .then(res => {
          // // console.log(res)
          if (res.code === 0) {
            this.$message.success('修改成功！')
            if (status) {
              this.isEdit0 = false
            } else {
              this.isEdit0 = true
            }
            this.isEdit1 = true
            this.isEdit2 = true
            this.isEdit3 = true
            this.shipInfoOwnerShow = false
            this.isEdit4 = true
            this.isEdit5 = true
            this.isEdit6 = true
            this.isEdit7 = true
            this.isEdit8 = true
            this.isEdit9 = true
            this.isEdit10 = true
            this.getShipInfo({ id: this.id })
          }
        })
        .catch(rs => {})
    },
    edit0 () {
      if (!this.btnControl.edit) {
        this.$message.error('您无此权限！')
        return false
      }
      this.editForm0 = {
        name: this.shipInfo.name,
        identifier: this.shipInfo.identifier,
        isSelfOperation: this.shipInfo.isSelfOperation,
        imo: this.shipInfo.imo,
        loadingCapacity: this.shipInfo.loadingCapacity,
        shipType: this.shipInfo.shipType,
        buildTime: this.shipInfo.buildTime,
        status: this.shipInfo.status
      }
      this.editForm3.custId = this.shipInfo.custId
      this.isEdit0 = false
    },
    edit0Change (date, dateString) {
      this.editForm0.buildTime = dateString
    },
    save0 () {
      // // console.log(this.editForm0)
      let _s = this
      _s.$refs['editForm0'].validate(valid => {
        if (valid) {
          if (_s.editForm0.isSelfOperation === 0 && !_s.editForm3.custId) {
            _s.$message.warning('请先保存船东信息！')
            return false
          }
          _s.shipInfoEdit({
            ..._s.editForm0,
            id: _s.id
          })
        }
      })
    },
    cancel0 () {
      this.isEdit0 = true
      this.shipInfoOwnerShow = false
    },
    isSelfOperationChange (e) {
      if (e === 0) {
        this.shipInfoOwnerShow = true
      }
    },
    edit1 () {
      if (!this.btnControl.edit) {
        this.$message.error('您无此权限！')
        return false
      }
      this.editForm1 = {
        portOfRegistry: this.shipInfo.portOfRegistry,
        inspectionTime: this.shipInfo.inspectionTime,
        maintenanceTime: this.shipInfo.maintenanceTime,
        insuranceExpireTime: this.shipInfo.insuranceExpireTime,
        length: this.shipInfo.length,
        width: this.shipInfo.width,
        height: this.shipInfo.height,
        depth: this.shipInfo.depth,
        tonnage: this.shipInfo.tonnage,
        netTonnage: this.shipInfo.netTonnage,
        alarmOilQuantity: this.shipInfo.alarmOilQuantity
      }
      this.isEdit1 = false
    },
    edit1Change1 (date, dateString) {
      this.editForm1.insuranceExpireTime = dateString
    },
    edit1Change2 (date, dateString) {
      this.editForm1.inspectionTime = dateString
    },
    edit1Change3 (date, dateString) {
      this.editForm1.maintenanceTime = dateString
    },
    save1 () {
      this.$refs.editForm1.validate(valid => {
        // // console.log(this.editForm1)
        if (valid) {
          this.shipInfoEdit({
            ...this.editForm1,
            id: this.id
          })
        }
      })
    },
    cancel1 () {
      this.isEdit1 = true
    },
    edit2 () {
      if (!this.btnControl.edit) {
        this.$message.error('您无此权限！')
        return false
      }
      this.editForm2 = {
        captainName: this.shipInfo.shipInfoAccount.captainName,
        id: this.shipInfo.shipInfoAccount.id
      }
      this.isEdit2 = false
    },
    save2 () {
      this.$refs.editForm2.validate(valid => {
        if (valid) {
          this.shipInfoEdit({
            shipInfoAccount: {
              ...this.editForm2
            },
            id: this.id
          })
        }
      })
    },
    cancel2 () {
      this.isEdit2 = true
    },
    edit4 () {
      if (!this.btnControl.edit) {
        this.$message.error('您无此权限！')
        return false
      }
      this.isEdit4 = false
      this.editForm4.shipInfoContractList = this.shipInfo.shipInfoContractList || []
    },
    pdfName (src) {
      if (src && (~src.indexOf('.pdf') || ~src.indexOf('.PDF'))) {
        return src.substring(src.lastIndexOf('/') + 1)
      }
      return false
    },
    save4 () {
      this.$refs.editForm4.validate(valid => {
        if (valid) {
          this.shipInfoEdit({
            ...this.editForm4,
            id: this.id
          })
        }
      })
    },
    cancel4 () {
      this.$refs.editForm4.resetFields()
      this.isEdit4 = true
    },
    edit5 () {
      if (!this.btnControl.edit) {
        this.$message.error('您无此权限！')
        return false
      }
      this.isEdit5 = false
      this.editForm5.operationCertificatePics = this.shipInfo.operationCertificatePics
    },
    operationCertificatePics (str) {
      // console.log(str)
      this.editForm5.operationCertificatePics = str
    },
    save5 () {
      this.$refs.editForm5.validate(valid => {
        if (valid) {
          this.shipInfoEdit({
            ...this.editForm5,
            id: this.id
          })
        }
      })
    },
    cancel5 () {
      this.isEdit5 = true
    },
    edit6 () {
      if (!this.btnControl.edit) {
        this.$message.error('您无此权限！')
        return false
      }
      this.isEdit6 = false
      this.editForm6.insurancePolicyPics = this.shipInfo.insurancePolicyPics
    },
    insurancePolicyPics (str) {
      this.editForm6.insurancePolicyPics = str
    },
    save6 () {
      this.$refs.editForm6.validate(valid => {
        if (valid) {
          this.shipInfoEdit({
            ...this.editForm6,
            id: this.id
          })
        }
      })
    },
    cancel6 () {
      this.isEdit6 = true
    },
    edit7 () {
      if (!this.btnControl.edit) {
        this.$message.error('您无此权限！')
        return false
      }
      this.isEdit7 = false
      this.editForm7.inspectionCertificatePics = this.shipInfo.inspectionCertificatePics
    },
    inspectionCertificatePics (str) {
      this.editForm7.inspectionCertificatePics = str
    },
    save7 () {
      this.$refs.editForm7.validate(valid => {
        if (valid) {
          this.shipInfoEdit({
            ...this.editForm7,
            id: this.id
          })
        }
      })
    },
    cancel7 () {
      this.isEdit7 = true
    },
    edit8 () {
      if (!this.btnControl.edit) {
        this.$message.error('您无此权限！')
        return false
      }
      this.isEdit8 = false
      this.editForm8.staffingCertificatePics = this.shipInfo.staffingCertificatePics
    },
    staffingCertificatePics (str) {
      this.editForm8.staffingCertificatePics = str
    },
    save8 () {
      this.$refs.editForm8.validate(valid => {
        if (valid) {
          this.shipInfoEdit({
            ...this.editForm8,
            id: this.id
          })
        }
      })
    },
    cancel8 () {
      this.isEdit8 = true
    },
    edit9 () {
      if (!this.btnControl.edit) {
        this.$message.error('您无此权限！')
        return false
      }
      this.isEdit9 = false
      this.editForm9.nationalityCertificatePics = this.shipInfo.nationalityCertificatePics
    },
    nationalityCertificatePics (str) {
      this.editForm9.nationalityCertificatePics = str
    },
    save9 () {
      this.$refs.editForm9.validate(valid => {
        if (valid) {
          this.shipInfoEdit({
            ...this.editForm9,
            id: this.id
          })
        }
      })
    },
    cancel9 () {
      this.isEdit9 = true
    },
    edit10 () {
      if (!this.btnControl.edit) {
        this.$message.error('您无此权限！')
        return false
      }
      this.isEdit10 = false
      this.editForm10.ownershipCertificatePics = this.shipInfo.ownershipCertificatePics
    },
    ownershipCertificatePics (str) {
      this.editForm10.ownershipCertificatePics = str
    },
    save10 () {
      this.$refs.editForm10.validate(valid => {
        if (valid) {
          this.shipInfoEdit({
            ...this.editForm10,
            id: this.id
          })
        }
      })
    },
    cancel10 () {
      this.isEdit10 = true
    },
    edit3 () {
      if (!this.btnControl.edit) {
        this.$message.error('您无此权限！')
        return false
      }
      this.shipInfoOwnerShow = true
    },
    save3 () {
      this.$refs.editForm3.validate(valid => {
        if (valid) {
          // // console.log(this.editForm3)
          this.shipInfoEdit(
            {
              ...this.editForm3,
              id: this.id
            },
            true
          )
        }
      })
    },
    onSearch (searchText) {
      // // console.log(searchText)
      this.getShipOwner({
        status: 1,
        nameLike: searchText,
        belongCompany: 'JIA_HUA',
        custTypeLike: 'SUPPLIER',
        isPayable: 1
      })
    },
    onSelect (val, option) {
      this.editForm3.custId = this.shipOwner[option.key].id
      this.selectObj = this.shipOwner[option.key]
    },
    // 模糊搜索
    getShipOwner (e) {
      let _this = this
      getShipOwnerByNameLike(e)
        .then(res => {
          _this.shipOwner = res.data
        })
        .catch(rs => {})
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.btnControl = this.$root._bc
      // console.log(this.$root._bc)
    })
    let _this = this
    _this.getShipInfo({ id: _this.id })
    _this.shipId = _this.id
  }
}
</script>
<style lang="less" scoped>
.ant-card {
  position: relative;
  margin-bottom: 20px;
  border: none;
  .cardEdit {
    position: absolute;
    right: 180px;
    top: 24px;
    z-index: 2;
  }
  .card-title {
    position: relative;
    padding-left: 16px;
    font-size: 18px;
    line-height: 1;
    color: #000;
    margin-bottom: 20px;
    &:before {
      content: '';
      width: 5px;
      height: 18px;
      background: #1890ff;
      border-radius: 4px;
      position: absolute;
      left: 0;
      top: -1px;
    }
  }
}
</style>
<style>
.voyageDE {
  background: #fff;
  padding-bottom: 12px;
}
.voyageDETitle {
  padding: 0 24px;
}
.voyageDETitle h3 {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  height: 28px;
  margin-bottom: 20px;
}
.voyageDETitle h3 button {
  float: right;
}
.voyageDETitle h3 img {
  float: left;
  width: 28px;
  margin-right: 10px;
}
.voyageDETitle1 .ant-form-item .ant-form-item-required {
  font-weight: 600;
  font-size: 20px;
}
.voyageDETitle1 .fried {
  float: right;
  margin-right: 0px;
}
.HCdetail {
  padding-bottom: 10px;
}
.HCdetail_1 {
  padding-bottom: 0px;
}
.HCdetail_zt {
  float: right;
  margin-right: 24px;
}
.ant-steps-item-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 80%;
  margin: 0 auto;
}
.hangc {
  position: absolute;
  top: -8px;
}
.chuanb .ant-tabs-nav-scroll {
  background: #fff;
  padding: 0 24px;
}
.ant-tabs-nav .ant-tabs-tab {
  font-size: 16px;
}
.chuanb_detail .ant-card {
  margin: 8px 24px 24px 24px;
}
#echartss::-webkit-scrollbar-track,
.dp_ddgz::-webkit-scrollbar-track {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  background-color: #f2f2f2;
} /*外层轨道*/
#echartss::-webkit-scrollbar,
.dp_ddgz::-webkit-scrollbar {
  width: 8px; /*设置滚动条样式*/
  height: 8px;
  background-color: #fff;
} /*滚动条整体部分，可以设置宽度啥的*/
#echartss::-webkit-scrollbar-thumb,
.dp_ddgz::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #c1c1c1;
} /*滚动的滑块 */
.hangci_rzhi .ant-card-bordered .ant-card-body {
  padding: 0px 0 0px 24px;
}
.JournalRZ {
  background: #f9fcff;
  border: 1px #dbe3ff solid;
}
.JournalRZ .ant-card {
  margin: 0;
}
.JournalRZ .ant-card-bordered {
  background: url(../../../static/images/Journal1.png) no-repeat 95% 80%;
  border: none;
}
.JournalRZ1 .ant-card-bordered {
  background: url(../../../static/images/Journal2.png) no-repeat 90% 80%;
  border: none;
}
.JournalRZ2 .ant-card-bordered {
  background: url(../../../static/images/Journal3.png) no-repeat 90% 80%;
  border: none;
}
.ant-card-body1 {
  background: #f9fcff;
  border: 1px #dbe3ff solid;
  padding: 24px 24px 16px 24px;
}
.caiG1 {
  background: url(../../../static/images/ChuanbOil2.png) no-repeat right center;
}
.caiG2 {
  background: url(../../../static/images/ChuanbOil1.png) no-repeat right center;
}
.ant-card-body1 .cgYoul {
  font-size: 40px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 400;
  margin-bottom: 0;
}
.ant-card-body1 .caiGou {
  margin-bottom: 0;
  line-height: 16px;
}
.ant-card-body1 .cgSale {
  margin-bottom: 0;
  line-height: 16px;
  border-top: 1px #dbe3ff solid;
  padding-top: 16px;
}
.ant-card-body1 .cgSale span {
  float: right;
  font-size: 18px;
  font-weight: bold;
}
</style>
<style lang="less">
.shipder1 .ant-descriptions-item-colon {
  float: left;
  width: 42%;
  text-align: right;
}

.chandx .ant-descriptions-item-content {
  float: left;
  width: 58%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
